<template>
  <view>
    <!-- 1. 头部搜索框 -->
    <ugo-search />
    <!-- 2. tabs 选项卡 -->
    <u-tabs :list="tabList" lineColor="#EB4450" :scrollable="false"></u-tabs>
    <!-- 3. 商品列表 -->
    <view class="goods-list" >
      <navigator class="goods-item" :url="`/goodsPackage/goods_detail/index?goods_id=${item.goods_id}`" 
       v-for="item in GoodsList" :key="item.goods_id">
        <image :src="item.goods_big_logo" class="goods-image" mode="aspectFit" />
        <!-- 商品信息 -->
        <view class="goods-info">
          <view class="goods-name">{{ item.goods_name }}</view>
          <view class="goods-price">{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
    <!-- 底部提示 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      GoodsList:[],
       // 查询参数
       queryParams: {},
       // 页码值
       total:0,
      tabList: [{ name: "综合" }, { name: "销量" }, { name: "价格" }],
    };
  },
  // 接收传递过来的参数
  onLoad(option){
    console.log(option);
    this.queryParams = {
      ...option,
      pagenum: 1,  // 页码
      pagesize: 10,  // 页容量
    }
    // 调用函数 重新刷新页面
    this.getGoodsList ()
  },
  //[上拉刷新]是否触底是小程序默认自带的事件，只要当前页面滚动到底部了就会触发
  onReachBottom() {
      console.log("触底了~");
      // 如果我们响应回来的数组的长度小于页码值,我们就可以让页面加1 然后 重新发送下一页的请求 
      // 如果 等于页码值 说明已经到底了 我们就可以给一个提示框
      if (this.GoodsList.length < this.total) {
        // 页面+1
        this.queryParams.pagenum++;
        // 重新请求下一页数据
        this.getGoodsList();
      } else {
        uni.showToast({
          title: "没有更多数据了",
          icon: "none",
        });
      }
  },
  //[下拉刷新] 刷新 就是把页面所有的数据进行刷新重置
 async onPullDownRefresh(){
    console.log('用户下拉刷新,钩子函数');
    // 把 页码值恢复为1
    this.queryParams.pagenum = 1
    // 重新响应回来的数组
    this.GoodsList = []
    this.total = 0
    // 调用函数 重新刷新页面 这是一个异步的 需要加上async await
   await this.getGoodsList ()
  },
  methods:{
    // 进入页面就开始发送请求 渲染数据
  async getGoodsList(){
    const res = await uni.$u.http.request({
      url:'/goods/search',
      params:this.queryParams
    })
    console.log(res);
    // 这个位置不用赋值的形式 直接使用push形式,因为 我们下拉数据的时候,还需要继续发请求 拿到数据,然后渲染页面进行下拉框选择
    // this.GoodsList = res.data.message.goods
    this.GoodsList.push(...res.data.message.goods)
    this.total = res.data.message.total
  }
  }

};
</script>

<style lang="scss">
.goods-list {
  .goods-item {
    display: flex;
    border-bottom: 1rpx solid #ddd;
    padding: 25rpx;
    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      /* 垂直方向两端对齐 */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;
      .goods-name {
        /* 多行超出隐藏 */
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .goods-price {
        color: #eb4450;
        /* 前面的价格符号 */
        &::before {
          content: "￥";
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}
</style>